<template>
  <section>
    <cube-form
      ref="form"
      :model="form"
      :schema="schema"
      :immediate-validate="false"
      :options="options"
      @validate="validateHandler"
      @submit="submitHandler"
    ></cube-form>
    <form-btn @onInput="input" @onSubmit="submit"></form-btn>
  </section>
</template>

<script>
import FormBtn from "./FormBtn";

import {show} from 'utils/Base'

import {login} from 'api/UsersApi'

import {mapMutations} from 'vuex'

export default {
  name: "LoginForPwd",
  components: {
    FormBtn
  },
  data() {
    return {
      options: {
        scrollToInvalidField: true,
        layout: "classic"
      },
      form: {
        loginName: "",
        loginPwd: "",
        serviceChecked: false,
        type: 'pwd'
      },
      schema: {
        groups: [
          {
            fields: [
              {
                type: "input",
                modelKey: "loginName",
                label: "账户",
                props: {
                  placeholder: "请输入手机号/邮箱",
                  clearable: true
                },
                rules: {
                  required: true
                },
                messages: {
                  required: "登陆账户不能为空"
                }
              },
              {
                type: "input",
                modelKey: "loginPwd",
                label: "密码",
                props: {
                  type: "password",
                  placeholder: "请输入密码",
                  clearable: true,
                  eye: { open: false, reverse: false }
                },
                rules: {
                  required: true
                },
                messages: {
                  required: "密码不能为空"
                }
              }
            ]
          }
        ]
      }
    };
  },
  methods: {
    validateHandler(result) {},
    submitHandler(e) {
      if(!this.form.serviceChecked) {
        show('请勾选协议和免责条款');
        return;
      }

      login(this.form)
        .then(res => {
          console.info(res);
          if(res.meta.success) {
            show('登陆成功')
            this.saveToken(res.data)
            this.$router.replace('/users/center');
          } else show(res.meta.message)
        });
    },
    input(value) {
      this.form.serviceChecked = value
    },
    submit () {
      this.$refs.form.submit()
    },
    ...mapMutations(["saveToken"])
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

/ >>> .cube-form-item_required .cube-form-label::before {
  content: '';
}

/ >>> .cube-input_active::after {
  border-color: $colorPrimary;
}

/ >>> .cube-checkbox_checked .cube-checkbox-ui i {
  color: $colorPrimary;
}
</style>
